<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form-item label="标题">
        <a-input v-model="queryParam.title" />
      </a-form-item>
      <a-form-item label="文件编码">
        <a-input v-model="queryParam.code" />
      </a-form-item>
      <a-form-item label="分类">
        <j-dict-select-tag
          v-model="queryParam.type"
          placeholder="请选择"
          dict-code="hr_officedoc_type"
          style="width:180px;"
        >
        </j-dict-select-tag>
      </a-form-item>
      <a-form-item label="发布时间">
        <j-date placeholder="请选择开始时间"  date-format="YYYY-MM-DD" v-model="queryParam['outDate_begin']" style="width:calc(50% - 15px);"></j-date>
        <span class="group-query-strig">~</span>
        <j-date placeholder="请选择开始时间" date-format="YYYY-MM-DD" v-model="queryParam['outDate_end']" style="width:calc(50% - 15px);"></j-date>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>
    <vxe-grid
      id="OfficedocReceivedList"
      ref="vxeTable"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      @toolbar-button-click="toolbarButtonClickEvent"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >

      <template v-slot:appendix="{ row }">
        <a-dropdown v-if="row.appendix">
          <a >附件<a-icon type="down" /></a>
          <a-menu slot="overlay">
            <template v-for="(file,index) in row.appendix.split(',')">
              <a-menu-item :key="index">
                <a @click.prevent="downloadItem(file)" :href="file">{{file}}</a>
              </a-menu-item>
            </template>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-slot:operate="{ row }">
        <a @click="pdfPreview(row)">查看</a>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="layouts"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <pdf-preview-modal @onload="onIframeLoad" ref="pdfmodal" />
  </a-card>
</template>
<script >
// import OaOfficialdocReceivedModal from './modal/OaOfficialdocReceivedModal'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import PdfPreviewModal from '@/views/jeecg/modules/PdfPreviewModal'
import Axios from 'axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import { getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate.vue'
export default {
  name: 'OfficedocReceivedList',
  mixins: [VxeTableMixin],
  components: {
    // OaOfficialdocReceivedModal,
    PdfPreviewModal,
    JDate
  },
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'title', title: '标题' },
        { field: 'code', title: '文件编码',showOverflow: true },
        { field: 'type', title: '文件分类', slots: { default: ({ row }) => {
          return filterDictTextByCache('hr_officedoc_type', row.type)
        } }},
        { field: 'status', title: '审核状态', slots: { default: ({ row }) => {
          return filterDictTextByCache('hr_officedoc_status', row.status)
        } }},
        { field: 'outDate', title: '发布时间' },
        { field: 'topType', title: '置顶', slots: { default: ({ row }) => {
          let text = ''
          switch (row.topType) {
            case '1':
              text = '不置顶'
              break
            case '2':
              text = '置顶'
              break
            case '3':
              text = '永久置顶'
              break
            default:
          }
          return text
        }
        }},
        {
          title: '查看附件',
          field: 'appendix',
          slots: { default: 'appendix' }
        },
        { field: 'operate', title: '操作', width: 150, slots: { default: 'operate' }}
      ],
      url: {
        list: '/hr/officedoc/listByUser'
      },
      isorter: {
        column: '',
        order: ''
      },
      officedocId: ''
    }
  },
  methods: {
    pdfPreview(row) {
      const title = row.file
      this.officedocId = row.id
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.$refs.pdfmodal.previewFiles(title, token)
    },
    downloadItem(filePath) {
      const url = filePath ? window._CONFIG['staticDomainURL'] + '/' + filePath : ''
      Axios.get(url, { responseType: 'blob' })
        .then(({ data }) => {
        // 为了简单起见这里blob的mime类型 固定写死了
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = url.split('/').pop()
          link.click()
            .catch(error => {
              console.error(error)
            })
        })
    },
    onIframeLoad() { // 标记查看
      getAction('/hr/officedoc/read/' + this.officedocId)
    }
  }
}
</script>
